<template>
  <el-dialog
      v-model="dialogVisible"
      title="修改用户"
      width="30%"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="姓&#8195;名:">
        <el-input v-model="form.name"/>
      </el-form-item>
      <el-form-item label="电&#8195;话:">
        <el-input v-model="form.phone"/>
      </el-form-item>
      <el-form-item label="邮&#8195;箱:">
        <el-input v-model="form.eMail"/>
      </el-form-item>
      <el-form-item label="身份证:">
        <el-input v-model="form.cardId"/>
      </el-form-item>
      <el-form-item label="宿舍号:">
        <el-select v-model="form.dormitoryId" placeholder="下拉选择宿舍号">
          <el-option v-for="(item,index) in dormitoryList" :key="index" :label="item.number" :value="item.id"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="update()">
          修改
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "update",
  props: {
    getDialog: {
      type: Boolean,
      required: true
    },
    getInfo: {
      type: Object,
      required: true
    }
  },
  watch: {
    getDialog: {
      handler(val) {
        this.dialogVisible = val
      }
    },
    getInfo: {
      handler(val) {
        this.form = val
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      form: {
        name: "",
        phone: "",
        eMail: "",
        cardId: "",
        dormitoryId: "",
      }
    }
  },
  methods: {
    getDormitoryList() {
      let data = {
        start: 0,
        end: 1000
      }
      axios({
        url: "http://localhost:8888/dormitory/info/list",
        method: "post",
        data: data,
        headers: {
          token: localStorage.getItem("token")
        }
      }).then(res => {
        this.dormitoryList = res.data
      })
    },
    update() {
      axios({
        url: `http://localhost:8888/info/updateInfo`,
        method: "put",
        data: this.form
      }).then((res) => {
        if (res.data) {
          ElMessage({
            message: "修改信息成功",
            type: "success"
          })
          this.handleClose()
        } else {
          ElMessage({
            message: "修改信息失败",
            type: "warring"
          })
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
      this.$emit("close", false)
    }
  },
  mounted() {
    this.getDormitoryList()
  }
}
</script>

<style scoped>

</style>